import { defineComponent } from 'friendly-petite-vue'


export default defineComponent((props?: any) => {
    return {
        template: `
        <div class="calc_output" ref="root">
            <input class="calc_output-result" :value="output" readonly>
            <input class="calc_output-discount" v-model="$store.discount" readonly>
            <span class="calc_output-percent">%</span>
        </div>
        <div class="calc_btn" v-for="btn in btns" @click="handleClick(btn)" :class="{sign: typeof btn !== 'number'}">{{btn}}</div>
        `,
        mounted() {
            this.$el.classList.add('calc')
        },
        data() {
            return {
                btns: props && props.btns || [7,8,9,'x',4,5,6,'-',1,2,3,'+',0,'.','/', '='],
                sign: '+',
                input: [],
                sum: 0,
                output: 0,
                calced: false,
            }
        },
        methods: {
            handleClick(btn) {
                if (typeof btn === 'number') {
                    if (this.calced) {
                        this.sum = 0
                    }

                    this.input.push(btn)
                    this.output = this.input.join('')
                }
                else if (btn === '.') {
                    if (this.calced) {
                        this.sum = 0
                    }

                    if (this.input.indexOf('.') === -1) {
                        this.input.push('.')
                        this.output = this.input.join('')
                    }
                }
                else if (['+', '-', 'x', '/'].indexOf(btn) !== -1) {
                    if (this.input.length === 0) return

                    if (['+', '-'].indexOf(this.sign) !== -1){
                        this.sum += Number(this.sign + (this.input.splice(0).join('') || '0'))
                    }
                    else if ('x' === this.sign) {
                        this.sum *= Number((this.input.splice(0).join('') || '1'))
                    }
                    else if ('/' === this.sign) {
                        this.sum /= Number((this.input.splice(0).join('') || '1'))
                    }

                    this.sign = btn
                    this.output += btn
                }
                else if (btn === '=') {
                    if (this.input.length === 0) return

                    if (['+', '-'].indexOf(this.sign) !== -1){
                        this.sum += Number(this.sign + (this.input.splice(0).join('') || '0'))
                    }
                    else if ('x' === this.sign) {
                        this.sum *= Number((this.input.splice(0).join('') || '1'))
                    }
                    else if ('/' === this.sign) {
                        this.sum /= Number((this.input.splice(0).join('') || '1'))
                    }
                    this.sum = this.sum * (this.$store.discount / 100)
                    this.sign = '+'
                    this.output = this.sum
                    this.calced = true
                }

                if (btn !== '=' && this.calced) {
                    this.calced = false
                }
            }
        }
    }
})